<!doctype html>
<html ng-app="myApp">

<head>
  
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Test</title>
  
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
  <!-- REQUIRED 1/3 - AngularJS Core -->
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <!-- REQUIRED 2/3 - styles for the image crop component -->
  <link rel="stylesheet" href="image-crop-styles.css">
  
  <script>
  
    var myApp = null;
	
    (function() {

    angular.module('myApp', ['ImageCropper'])  
	  
	.controller('MainController', ['$scope', function($scope) {
		
		$scope.fileChanged = function(e) {			
		
			var files = e.target.files;
		
     		var fileReader = new FileReader();
			fileReader.readAsDataURL(files[0]);		
			
			fileReader.onload = function(e) {
				$scope.imgSrc = this.result;
				$scope.$apply();
			};
			
		}		
	   
		$scope.clear = function() {
			 $scope.imageCropStep = 1;
			 delete $scope.imgSrc;
			 delete $scope.result;
			 delete $scope.resultBlob;
		};
		
	}]);

    })();
  </script>
  
  <!-- REQUIRED 3/3 - the image crop directive -->
  <script src="image-crop.js"></script>
  
  <style>
    /* Styles for this demo page */
    body {
      font-size: 12px;
      font-family: Helvetica, Arial;
      background: white;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    a {
      text-decoration: underline;
      color: blue;
      cursor: pointer;
    }
    hr {
      border: none;
      height: 1px;
      width: 80%;
      background: rgba(0,0,0,.3);
      margin: 40px auto;
    }
    .result-datauri {
      width: 300px;
      height: 100px;
      font-size: 11px;
      line-height: 15px;
      padding: 5px;
      border: 1px solid black;
      clear: both;
      display: block;
      margin: 20px auto;
    }
  </style>
  
  <body>
     <div ng-controller="MainController">
      
		<div ng-show="imageCropStep == 1">		
			<br/>
			<input type="file" name="fileInput" id="fileInput" onchange="angular.element(this).scope().fileChanged(event)" />
		</div>			
	  
	   <div ng-show="imageCropStep == 2">
		  <!-- <image-crop			 
			 data-height="200" //shape's height
			 data-width="150" //shape's width
			 data-shape="square" //the shape.. square or circle
			 data-step="imageCropStep"//scope variable that will contain the current step of the crop (1. Waiting for source image; 2. Image loaded, waiting for crop; 3. Crop done)
			 src="imgSrc" //scope variable that will be the source image for the crop (may be a Blob or base64 string)
			 data-result-blob="result" //scope variable that will contain the Blob information
			 data-result="resultDataUrl" //scope variable that will contain the image's base64 string representation
			 crop="initCrop" //scope variable that must be set to true when the image is ready to be cropped
			 padding="250" //space, in pixels, rounding the shape
			 max-size="1024" //max of the image, in pixels
		   ></image-crop> -->
		   
		   <image-crop			 
			 data-height="200"
			 data-width="150"
			 data-shape="square"
			 data-step="imageCropStep"
			 src="imgSrc"
			 data-result="result"
			 data-result-blob="resultBlob"
			 crop="initCrop"
			 padding="250"
			 max-size="1024"
		   ></image-crop>		   
	   </div>
       	   
	   <div ng-show="imageCropStep == 2">
		   <br/>
		   <button ng-click="clear()">Cancel</button>
		   <button ng-click="initCrop = true">Crop</button>		
	   </div>		  
	   
	   <div ng-show="imageCropStep == 3">
	   
	     <h2>Result</h2>
       
		 <p>The data-result-blob property is a Blob object, which is necessary in some upload libraries like <a href="https://github.com/nervgh/angular-file-upload" target="_blank">Angular File Upload</a></p>
		 <p>Image using the data uri:</p>
		 <img ng-src="{{result}}"></img>
         <p>The Base64 String used in the image above:</p>         
         <textarea class="result-datauri">{{ result }}</textarea>
		 <button ng-click="clear()">Clear</button>	
       
	  </div>
	   
     </div>
  </body>
</html>